<template>
  <div class="containers">
    <div id="canvas" ref="canvas" class="canvas" />
    <el-dialog :visible.sync="recordOpen" :title="$t('审批信息')" width="50%" :destroy-on-close="true" custom-class="dialogView" append-to-body :close-on-click-modal="false" :lock-scroll="false">
      <act-model-flow-details ref="actModelFlowDetails" />
    </el-dialog>
  </div>
</template>

<script>
// 引入相关的依赖
// import { xmlStr } from './json'
import { CustomViewer } from '@/components/customBpmn'
import { genProcessDiagram } from '@/api/act/process/actProcess'
import ActModelFlowDetails from '@/views/act/model/actModelFlowDetails'

export default {
  name: 'ActModelView',
  components: {
    ActModelFlowDetails
  },
  props: {
    actId: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      sid: undefined,
      history: undefined,
      recordOpen: false,
      bpmnModeler: null,
      container: null,
      canvas: null
    }
  },
  // 计算属性
  computed: {},
  watch: {
    actId: {
      handler(val) {
        if (val !== null && val !== 'null' && val !== undefined) {
          this.$nextTick(() => {
            this.init(val)
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() { },
  // 方法集合
  methods: {
    init(actId) {
      this.bpmnViewer = new CustomViewer({
        container: this.$refs.canvas
      })
      // 根据流程实例ID获取xml用于显示流程图
      genProcessDiagram(actId).then(response => {
        this.$nextTick(() => {
          this.createNewDiagram(response.msg)
        })
      })
    },
    async createNewDiagram(xmlStr) {
      try {
        const result = await this.bpmnViewer.importXML(xmlStr)
        const { warnings } = result
        console.log(warnings)

        const canvas = this.bpmnViewer.get('canvas')
        canvas.zoom('fit-viewport', true)

        this.success()
      } catch (err) {
        console.log(err.message, err.warnings)
      }
    },
    success() {
      // this.setColor()
      // this.getParms();
      this.addEventBusListener()
    },
    setColor() {
      // access viewer components
      const canvas = this.bpmnViewer.get('canvas')

      // 获取到全部节点
      const allShapes = this.bpmnViewer.get('elementRegistry').getAll()

      // 循环节点添加颜色
      allShapes.forEach(element => {
        const shapeId = element.businessObject.id
        const shapeAttrs = element.businessObject.$attrs

        // add marker
        if (element.businessObject.$type !== 'bpmn:Group') {
          if (element.businessObject.$type === 'bpmn:SequenceFlow') {
            canvas.addMarker(shapeId, 'highlight-2' + shapeAttrs.run_state)
          } else {
            canvas.addMarker(shapeId, 'highlight-' + shapeAttrs.run_state)
          }
        }
      })
    },
    getParms() {
      // 获取节点属性
      console.log(
        '123',
        this.bpmnViewer.get('elementRegistry').get('Activity_0o8b5cf')
          .businessObject.$attrs
      )

      // 获取上一个节点的类型
      console.log(
        '234',
        this.bpmnViewer.get('elementRegistry').get('Flow_1d9q74f')
          .businessObject.sourceRef.$type
      )
    },
    addEventBusListener() {
      const eventBus = this.bpmnViewer.get('eventBus')

      var that = this
      eventBus.on('element.click', function(e) {
        // 只有用户节点目前才可以点击（ 判断是否是用户节点类型：e.element.businessObject.$type === 'bpmn:UserTask'）
        if (e.element.businessObject.$type === 'bpmn:UserTask') {
          console.log(that.actId, 'actId')
          // 后台生成的流程图xml文件中给历史节点、当前节点添加了属性history='history'，用户区分 当前点击弹窗是可以直接获取的
          if (e.element.businessObject.$attrs !== undefined && e.element.businessObject.$attrs.history === 'history') {
            that.recordOpen = true
            that.$nextTick(() => {
              const param = {
                actId: that.actId,
                sid: e.element.businessObject.id,
                history: e.element.businessObject.$attrs.history
              }
              // 调用form页面的 init 方法初始化数据
              that.$refs.actModelFlowDetails.getList(param)
            })
          } else {
            // 获取没有审批的节点数据 区别在于history是否有值
            that.recordOpen = true
            that.$nextTick(() => {
              const param = {
                actId: that.actId,
                sid: e.element.businessObject.id,
                history: undefined
              }
              // 调用form页面的 init 方法初始化数据
              that.$refs.actModelFlowDetails.getList(param)
            })
          }
        }
        console.log(e.element.businessObject)
        console.log(
          '点击了element',
          e.element.businessObject.id,
          e.element.businessObject.$type,
          e.element.businessObject.name,
          e.element.businessObject.$attrs.history
        )
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.containers {
  width: 100%;
  height: calc(100vh - 160px);
  .canvas {
    width: 100%;
    height: 100%;
  }
  /deep/ .djs-label{
    fill:black !important;
  }
  /deep/ .djs-shape .djs-visual path{
    stroke: black !important;
  }
  /deep/ .djs-visual path[d='m 15,12 m -6.9,-3.80 c 0,0 2.25099998,-2.358 4.27399998,-1.177 2.024,1.181 4.221,1.537 4.124,0.965 -0.098,-0.57 -0.117,-3.79099999 -4.191,-4.13599999 -3.57499998,0.001 -4.20799998,3.36699999 -4.20699998,4.34799999 z']{
    fill:black !important;
  }

  // /deep/.highlight .djs-visual> :nth-child(1) {
  //   fill: #dfdfdf !important;
  //   stroke: #dfdfdf !important;
  // }

  // /deep/.highlight-0 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  // }

  // /deep/.highlight-1 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  //   fill: #f8f8f8 !important;
  // }

  // /deep/.highlight-2 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  //   fill: #cff5fa !important;
  // }

  // /deep/.highlight-3 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  //   fill: #d7f6ce !important;
  // }

  // /deep/.highlight-4 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  //   fill: #ffafaf !important;
  // }

  // /deep/.highlight-5 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  //   fill: #fde1b0 !important;
  // }

  // /deep/.highlight-6 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  //   fill: #f6d5f0 !important;
  // }

  // /deep/.highlight-7 .djs-visual> :nth-child(1) {
  //   fill: #c9e2fa !important;
  // }

  // /deep/.highlight-8 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  //   fill: #e2dcf9 !important;
  // }

  // /deep/.highlight-9 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  //   fill: #fa7c7c !important;
  // }

  // /* 连线 */
  // /deep/.highlight-20 .djs-visual> :nth-child(1) {
  //   stroke: black !important;
  // }

  // /deep/.highlight-23 .djs-visual> :nth-child(1) {
  //   stroke: green !important;
  // }

  // /deep/.highlight-24 .djs-visual> :nth-child(1) {
  //   stroke: red !important;
  // }
  /deep/.bjs-powered-by{
    display: none;
  }
}

</style>
